<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更底层的render函数</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {},
        template: `
          <my-title :level="1">
            hello
          </my-title>
        `
    });
    app.component('my-title',{
        props:['level'],
        render(){
            const {h} = Vue;
            //虚拟 DOM
            return h('h'+this.level,{},[this.$slots.default(),
                h('h2',{},["hello yuan",
                    h('h3',{},"yuanyuan")
                ])
            ])
        },
        template:`
            <h1 v-if="level === 1"><slot /></h1>
            <h2 v-if="level === 2"><slot /></h2>
        `
    })
    const vm = app.mount("#app");
</script>
</body>
</html>